<template>
  <div class="quality-query flex h-full">
    <!-- 左侧数据目录树 -->
    <div class="w-64 bg-white p-4 border-r">
      <div class="text-lg font-medium mb-4">数据目录</div>
      <el-input
        v-model="searchText"
        placeholder="搜索..."
        prefix-icon="i-carbon-search"
        clearable
        class="mb-4"
      />
      <el-tree
        ref="treeRef"
        :data="treeData"
        :props="defaultProps"
        node-key="id"
        highlight-current
        @node-click="handleNodeClick"
      />
    </div>

    <!-- 右侧内容区 -->
    <div class="flex-1 p-4">
      <!-- 搜索和操作按钮 -->
      <div class="flex justify-between items-center mb-4">
        <div class="flex items-center gap-4">
          <el-select v-model="selectedTemplate" placeholder="规则模板" class="w-60">
            <el-option label="检测不唯一" value="检测不唯一" />
            <el-option label="检测手机号不正确" value="检测手机号不正确" />
          </el-select>
          <el-button type="primary" @click="handleSearch">
            <div class="i-carbon-search mr-1" />
            查询
          </el-button>
        </div>
      </div>

      <!-- 数据中心整体质量情况 -->
      <div class="bg-white p-6 rounded-lg shadow-md mb-4">
        <h3 class="text-lg font-medium mb-4">数据中心整体质量情况</h3>
        <div class="grid grid-cols-4 gap-4">
          <ArtStatsCard
            icon="i-carbon-rule"
            title="检测规则总数"
            :count="100"
            description="当前系统中的检测规则总数"
            iconColor="#fff"
            iconBgColor="#409EFF"
          />
          <ArtStatsCard
            icon="i-carbon-warning"
            title="违规记录总数"
            :count="50"
            description="检测出的违规记录总数"
            iconColor="#fff"
            iconBgColor="#F56C6C"
          />
          <ArtStatsCard
            icon="i-carbon-data-check"
            title="检测数据量"
            :count="1000"
            description="已检测的数据总量"
            iconColor="#fff"
            iconBgColor="#67C23A"
          />
          <ArtStatsCard
            icon="i-carbon-chart-average"
            title="合格率"
            :count="95"
            unit="%"
            description="数据质量合格率"
            iconColor="#fff"
            iconBgColor="#E6A23C"
          />
        </div>
      </div>

      <!-- 检测结果列表 -->
      <div class="bg-white p-6 rounded-lg shadow-md">
        <ArtTable 
          :data="resultList" 
          :loading="loading"
          stripe
        >
          <el-table-column type="index" label="序号" width="80" align="center" />
          <el-table-column prop="checkObject" label="检测对象" min-width="120" show-overflow-tooltip />
          <el-table-column prop="checkField" label="检测字段" min-width="120" show-overflow-tooltip />
          <el-table-column prop="checkRule" label="检测规则" min-width="120" show-overflow-tooltip />
          <el-table-column prop="totalCount" label="检测总量" min-width="100" align="center" />
          <el-table-column prop="errorCount" label="违规数量" min-width="100" align="center" />
          <el-table-column prop="passRate" label="合格率" min-width="100" align="center">
            <template #default="scope">
              {{ scope.row.passRate }}%
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="scope">
              <el-button type="primary" link @click="handleViewDetail(scope.row)">
                违规明细
              </el-button>
            </template>
          </el-table-column>
        </ArtTable>

        <!-- 分页 -->
        <div class="flex justify-end mt-4">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 违规明细对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="违规明细"
      width="800px"
    >
      <el-table :data="violationDetails" border>
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="id" label="ID" min-width="100" />
        <el-table-column prop="value" label="字段值" min-width="120" />
        <el-table-column prop="reason" label="违规原因" min-width="200" />
        <el-table-column prop="checkTime" label="检测时间" min-width="160" />
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 左侧树相关
const searchText = ref('')
const treeRef = ref()
const treeData = ref([
  {
    id: 1,
    label: '数据中心',
    children: [
      {
        id: 11,
        label: '学校概况数据子集',
        children: [
          {
            id: 111,
            label: '学校基本数据子集'
          }
        ]
      },
      {
        id: 12,
        label: '学生管理数据子集'
      }
    ]
  }
])

const defaultProps = {
  children: 'children',
  label: 'label'
}

// 表格数据
const loading = ref(false)
const selectedTemplate = ref('')
const resultList = ref([
  {
    checkObject: 'GXXS0110',
    checkField: 'XXDZ',
    checkRule: '检测不唯一',
    totalCount: 100,
    errorCount: 5,
    passRate: 95
  },
  {
    checkObject: 'GXXS0101',
    checkField: 'XXDM',
    checkRule: '检测不唯一',
    totalCount: 200,
    errorCount: 10,
    passRate: 95
  }
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 违规明细对话框
const detailDialogVisible = ref(false)
const violationDetails = ref([
  {
    id: 'ID001',
    value: 'XXX大学',
    reason: '数据重复',
    checkTime: '2024-01-18 10:00:00'
  },
  {
    id: 'ID002',
    value: 'YYY大学',
    reason: '数据重复',
    checkTime: '2024-01-18 10:00:00'
  }
])

// 处理树节点点击
const handleNodeClick = (data: any) => {
  console.log(data)
  // TODO: 加载该节点下的检测结果
}

// 处理分页
const handleSizeChange = (val: number) => {
  pageSize.value = val
  // TODO: 重新加载数据
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // TODO: 重新加载数据
}

// 查询
const handleSearch = () => {
  loading.value = true
  // TODO: 调用查询接口
  setTimeout(() => {
    loading.value = false
  }, 500)
}

// 查看违规明细
const handleViewDetail = (row: any) => {
  detailDialogVisible.value = true
  // TODO: 加载违规明细数据
}
</script>

<style scoped>
.quality-query {
  height: calc(100vh - 100px);
  
  .dialog-footer {
    @apply flex justify-end gap-2;
  }
}
</style> 